import { Switch } from "antd";
import { OnOffDesc } from "@/components/render";
import { SelectStaff } from "@/components/func";

interface props {
  allowManualOffline: boolean; // 是否允许上下线
  backupStaff: any; // 备用员工
  setAllowManualOffline: any; // 设置是否允许上下线
  setBackupStaff: any; // 设置备用员工
}

const QrOnOffSpare = ({
  allowManualOffline,
  backupStaff,
  setAllowManualOffline,
  setBackupStaff,
}: props) => {
  return (
    <>
      {/* 是否允许 */}
      <div className="flex items-start mb-24">
        <span className="w-106 text-right mr-16">允许员工上下线:</span>
        {/* 开关 */}
        <div className="flex items-center justify-center ">
          <Switch
            size="small"
            onChange={e => {
              setAllowManualOffline(e);
            }}
            checked={allowManualOffline}
          />
          <OnOffDesc
            flag={allowManualOffline}
            desc="开启后员工可在侧边栏修改个人上下线状态"
          />
        </div>
      </div>

      {/* 备用员工选择 */}
      <div className="flex items-start mb-24">
        <div className="flex items-center">
          <span className="title-item w-106 text-right mr-16">
            <span
              className={`text-red-defalut relative top-4 text-lg mr-6 ${
                allowManualOffline ? "" : "none"
              }`}>
              *
            </span>
            备用员工:
          </span>

          <SelectStaff
            id="area1"
            placeholder={`${allowManualOffline ? "必填，" : ""}请选择备用员工`}
            value={(backupStaff && backupStaff.id) || null}
            setStaff={(SelectStaff: any) => {
              setBackupStaff(SelectStaff[0]);
            }}
          />
          <span className="mx-16 text-grey-400">
            当活码中所有员工均不可接待时，将分配客户给该员工
          </span>
        </div>
      </div>
    </>
  );
};

export default QrOnOffSpare;
